<template>
  <el-card v-loading="loading"
           element-loading-background="rgba(0, 0, 0, 0.8)"
           element-loading-spinner="el-icon-loading"
           element-loading-text="拼命加载中">
    <el-page-header content="详情页面" @back="$router.go(-1)">
    </el-page-header>
    <div class="bole_title">
      <h3>撰写文章</h3>
      <div style="flex: 1;"></div>
    </div>
    <el-divider></el-divider>
    <h4>文章标题</h4>
    <el-input
        v-model="articleTitle"
        maxlength="30"
        placeholder="标题"
        show-word-limit
        style="width: 300px"
        type="text"
    >
    </el-input>
    <h4>文章分类</h4>
    <el-select
        v-model="articleClassification"
        allow-create
        default-first-option
        filterable
        multiple
        multiple-limit="1"
        placeholder="请选择文章标签">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <h4>文章图片（可选）</h4>
    <el-upload
        ref="upload"
        :auto-upload="false"
        :on-change="handleRemove"
        action=""
        class="upload-demo"
        drag
        multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip">
          只能上传 jpg/png 文件，且不超过 500kb
        </div>
      </template>
    </el-upload>
    <h4>摘要</h4>
    <ckeditor v-model="articleAbstract" :config="editorConfig" :editor="editor"></ckeditor>
    <h4>正文</h4>
    <ckeditor v-model="articleContent" :config="editorConfig" :editor="editor"></ckeditor>
    <div style="text-align: right">
      <el-button :loading="butLoading" type="success" @click="addBoard(articleId)">发表文章</el-button>
    </div>
  </el-card>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {
  name: "Create",
  data() {
    return {
      loading: false,
      goBack: '',
      file: [],
      butLoading: false,
      editor: ClassicEditor,
      editorConfig: {
        // The configuration of the editor.
      },
      radio: '',
      name: '',
      userName: '',
      articleClassification: [],
      articleImg: '',
      articleTitle: '',
      articleContent: '',
      articleAbstract: '',
      token: '',
      articleData: '',
      articleViews: '',
      articleId: this.$route.query.id,
      options: [{
        value: '技术',
        label: '技术'
      }, {
        value: '分享',
        label: '分享'
      }, {
        value: '教程',
        label: '教程'
      }, {
        value: '日常',
        label: '日常'
      }, {
        value: '随笔',
        label: '随笔'
      },
      ],
    }
  },
  created() {
    this.GetArticle();
  },
  mounted() {
    this.token = localStorage.getItem('token');
    this.$axios.post('/user/getuser', {userToken: this.token}).then((res) => {
      this.userName = res.data.data.userName;
    })
  },
  methods: {
    GetArticle() {
      if (this.$route.query.id !== undefined) {
        this.loading = true;
        this.$axios.post('articles/getArticlesByid', {articleId: this.$route.query.id}).then((res) => {
          if (res.data.success) {
            this.articleData = res.data.data;
            this.articleTitle = this.articleData.articleTitle;
            this.articleContent = this.articleData.articleContent;
            this.articleAbstract = this.articleData.articleAbstract;
            this.articleClassification[0] = this.articleData.articleClassification;
            this.articleViews = this.articleData.articleViews;
            this.loading = false;
          }
        })
      }
    },
    //添加博客
    addBoard(val) {
      let formData = new FormData();
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data;',
        }
      }
      formData.append('file', this.file);
      formData.append('articleAbstract', this.articleAbstract);
      formData.append('articleClassification', this.articleClassification[0]);
      formData.append('articleContent', this.articleContent);
      formData.append('userName', this.userName);
      formData.append('articleTitle', this.articleTitle);

      if (val === undefined) {
        this.butLoading = true;
        this.$axios.post('/articles/addBoard', formData, config).then((res) => {
          if (res.data.success) {
            this.butLoading = true;
            this.$notify({
              title: '成功',
              message: res.data.message,
              type: 'success'
            });
            this.butLoading = false;
            this.$router.push('/blog/personal')
          } else {
            this.butLoading = false;
            this.$notify.error({
              title: '错误',
              message: '文章发表失败，联系管理员'
            });
          }
        })
      } else {
        formData.append('articleId', this.articleId);
        formData.append('articleViews', this.articleViews);
        this.$axios.post('articles/updateByid', formData, config).then((res) => {
          if (res.data.success) {
            this.$notify({
              title: '成功',
              message: res.data.message+'待审核！',
              type: 'success'
            });
            this.GetArticle();
          } else {
            this.$notify.error({
              title: '错误',
              message: res.data.message,
            });
          }
        })
      }
    },
    //获取文件源
    handleRemove(file) {
      this.file = file.raw;
    },
  }
}
</script>

<style scoped>
.ck-editor__editable {
  min-height: 200px;
}

.el-button {
  margin-top: 20px;
}

.bole_title {
  padding-top: 20px;
  display: flex;
}
</style>